<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <meta http-equiv="content-type" content="text/html">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate"/>
    <meta http-equiv="expires" content="Wed,26 Feb 1997 08:21:57 GMT"/>
    <title>猜灯谜</title>
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';
            src: url('../public/font/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        }

        body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select, strong {
            margin: 0;
            padding: 0;
        }

        body {
            background: #f2f2f2;
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            max-width: 100%;
            vertical-align: top;
        }

        .container {
            position: relative;
            font-size: .13rem;
            line-height: .25rem;
        }

        .activity-instruction {
            margin-top: -.01rem;
            height: 3.3rem;
            background: #010a3f;
        }

        .tips {
            color: #fff;
            padding-left: .3rem;
            font-size: .16rem;
        }

        h3 {
            margin-bottom: .15rem;
            padding-bottom: .12rem;
            font-size: .21rem;
            font-weight: 200;
            color: #fff;
            text-align: center;
        }

        .click {
            padding-top: .3rem;
            text-align: center;
        }

        .btn {
            display: inline-block;
            text-align: center;
            background: #fff;
            border: 1px solid #999;
            color: #b50125;
            font-size: .2rem;
            border-radius: .06rem;
            padding: .08rem .45rem;
        }

        .ticket-panel {
            padding: 0 .3rem;
            background: #f2f2f2;
        }

        .title {
            color: #3b3b3b;
            font-size: .26rem;
            text-align: center;
            padding: .3rem 0 .3rem 0;
        }

        .banner {
            background: #aaa;
            height: .8rem;
            margin-bottom: .35rem;
            z-index: 2;
            position: relative;
        }

        .banner.active {
            background: #660066;
        }

        .num {
            float: left;
            text-align: center;
            margin-top: .15rem;
            margin-left: .15rem;
            margin-right: .15rem;
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        .num > span {
            display: inline-block;
            width: .5rem;
            height: .5rem;
            line-height: .5rem;
            font-size: .5rem;
            color: #fff;
            border-radius: 1rem;
        }

        .banner.active .num > span {
            color: #ffdfb0;
        }

        .content {
            color: #fff;
            font-size: .2rem;
            padding-top: .28rem;
        }

        .banner.active .content {
            color: #ffdfb0;
        }

        .line-style {
            position: absolute;
            right: .5rem;
            bottom: .1rem;
            display: inline-block;
            content: ' ';
            height: .6rem;
            width: .01rem;
            border-radius: .01rem;
            z-index: 3;
            background: -webkit-linear-gradient(transparent, #fff, transparent);
            background: linear-gradient(transparent, #fff, transparent);
            background: -moz-linear-gradient(transparent, #fff, transparent);
            background: -o-linear-gradient(transparent, #fff, transparent);
            background: -ms-linear-gradient(transparent, #fff, transparent);
        }

        .banner.active .line-style {
            background: linear-gradient(transparent, #ffdfb0, transparent);
            background: -moz-linear-gradient(transparent, #ffdfb0, transparent);
            background: -webkit-linear-gradient(transparent, #ffdfb0, transparent);
            background: -o-linear-gradient(transparent, #ffdfb0, transparent);
            background: -ms-linear-gradient(transparent, #ffdfb0, transparent);
        }

        .state {
            width: .35rem;
            color: #fff;
            font-size: .18rem;
            float: right;
            margin-top: -.5rem;
        }

        .banner.active .state {
            color: #ffdfb0;
            margin-top: -.37rem;
        }

        .banner-box {
            position: relative;
        }

        .split {
            position: absolute;
            left: .1rem;
            bottom: -.03rem;
            width: 2.8rem;
            height: .15rem;
            transform: rotate(-4deg);
            -ms-transform: rotate(-4deg); /* IE 9 */
            -moz-transform: rotate(-4deg); /* Firefox */
            -webkit-transform: rotate(-4deg); /* Safari 和 Chrome */
            -o-transform: rotate(-4deg);
            background: #3f3f3f;
            z-index: 1;
        }

        .app-scan {
            text-align: center;
            padding-bottom: .2rem;
        }

        .hr-like::after {
            margin: auto;
            width: 80%;
            background: #ccc;
            height: 1px;
            display: block;
            content: ' ';
        }

        .notice {
            color: #333;
            /*font-size: .2rem;*/
            text-align: center;
            font-size: .155rem;
            margin: 0 0 .45rem 0;
        }

        .download {
            color: #333;
            text-align: center;
            font-size: .155rem;
            margin: .35rem 0 .3rem 0;
        }

        .bless {
            color: #797979;
            font-size: .155rem;
            text-align: center;
            margin: .1rem 0 .3rem 0;
        }

        .page-success {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            width: 100%;
            height: 100%;
        }

        .page-success .center-box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -1.45rem;
            margin-left: -1.35rem;
            width: 2.7rem;
            height: 2.9rem;
            background: #fff
        }

        .page-success .center-box h3 {
            text-align: center;
            line-height: .6rem;
            color: #5a5a5a;
            font-size: .23rem;
            font-weight: normal;
            padding-top: .2rem;
        }

        .page-success ul {
            padding: 0;
            margin: 0 auto;
            width: 2.4rem
        }

        .page-success ul li {
            list-style: none;
            text-align: center
        }

        .page-success .check-btn {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%
        }

        .page-success .check-btn li {
            float: left;
            width: 50%;
            font-size: .155rem
        }

        .page-success .check-btn li a {
            display: inline-block;
            text-align: center;
            width: 100%;
            line-height: .5rem;
            background: #ff6263;
            color: #fff
        }

        .page-success .check-btn li:first-child a {
            background: #40cccd
        }

        .con-di {
            width: 100%;
            height: 28%;
            text-align: center;
        }

        .con-di img {
            width: 1rem;
            height: 1rem;
        }

        .ticket-panel {
            display: none;
        }

        /*.lf-android-4-3 .state,*/
        /*.lf-android-4-2 .state,*/
        /*.lf-android-4-1 .state {*/
        /*width: .35rem;*/
        /*position: relative;*/
        /*bottom: .2rem;*/
        /*}*/

        /*.lf-android-4-3 .banner.active .state,*/
        /*.lf-android-4-2 .banner.active .state,*/
        /*.lf-android-4-1 .banner.active .state {*/
        /*bottom: .08rem;*/
        /*}*/

        /*.lf-android-4-3 .content,*/
        /*.lf-android-4-2 .content,*/
        /*.lf-android-4-1 .content {*/
        /*position: relative;*/
        /*top: .25rem;*/
        /*left: .4rem;*/
        /*}*/

        /*.lf-android-4-3 .num,*/
        /*.lf-android-4-2 .num,*/
        /*.lf-android-4-1 .num {*/
        /*position: relative;*/
        /*top: .15rem;*/
        /*left: .2rem;*/
        /*}*/

    </style>
    <script>
        !function (n, e) {
            var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize", d = function () {
                var n = t.clientWidth;
                if (n) {
                    var e = 100 * (n / 375);
                    t.style.fontSize = e + "px"
                }
            };
            n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
        }(document, window);
    </script>
</head>
<body>
<div class="container">
    <div class="big-img">
        <img src="img/guess-riddles.jpg" alt="">
    </div>
    <div class="activity-instruction">
        <h3>欢乐中秋, 大家一起来猜灯谜拿奖品</h3>
        <p class="tips">1. 扫码下载指点 (已安装的请忽略) </p>
        <p class="tips">2. 点击首页扫一扫扫描灯笼上的二维码</p>
        <p class="tips">3. 提交对应灯谜的谜底</p>
        <p class="tips">4. 正确即可获得奖品</p>
        <br>
        <p class="tips">可重复参与, 奖品多多, 惊喜多多!</p>
        <div class="click">
            <a class="btn">我要玩</a>
        </div>
    </div>
    <div class="ticket-panel">
        <p class="title">我的奖品</p>
        <div class="parent">

        </div>
        <p class="notice">请到指定地点领取奖品</p>
    </div>
    <div class="hr-like"></div>
    <p class="download">指点下载二维码</p>

    <div class="app-scan">
        <img src="img/scan.png" alt="">
    </div>
    <p class="bless">祝大家中秋快乐 , 阖家欢乐</p>
    <div class="page-success">
        <div class="center-box">
            <h3>奖品已到手了?</h3>
            <div class="con-di "><img src="img/gift.png" alt=""/></div>
            <ul class="check-btn">
                <li class="no-take"><a href="javascript:;">没有哦!</a></li>
                <li class="take"><a href="javascript:;">是的</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    //    var liefeng = {};
    var liefeng = {
        userInfo: {},
        os: {},
        imgPreUrl: 'http://wuye.oss-cn-shenzhen.aliyuncs.com/'//阿里云图片前缀
    };// 全局变量
</script>
<script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script type="text/javascript" src="../flexPhone.js"></script>
<script type="text/javascript" src="../../zhwy-hybrid/public/js/lib/common.min.js"></script>
<!--TODO 需要迪迪要改，目前不支持https-->
<!--<script src="//h5.liefengtech.com/zhwy-hybrid/public/js/lib/common.min.js"></script> -->
<script type="text/javascript">
    //todo url如何动态
    window.onload = function () {

        var prefix = lf.prod ?
            'http://o2o.prod.liefengtech.com' :
            'http://o2o.test.liefengtech.com';

        var url = '/api/o2o/order/listAllOrder';

        lf.bridgeJs.getUser(function (user) {
            var userId = user.userId;

            $.ajax({
                type: 'GET',
                url: lf.utils.getProtocol(prefix + url),
                data: {
                    userId: userId,
                    size: 999,
                    currentPage: 1,
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    var dataList = data.dataList,
                        parent = $('.parent'),
                        orderIdList = [];

                    for (var i = 0; i < dataList.length; i++) {

                        if (dataList[i].payStatus == 2) {
                            orderIdList.push(dataList[i].orderId);
                            if (dataList[i].shippingStatus == 2) {
                                var text = '已领取';
                                parent.append(
                                    '<div class="banner-box"><div class="banner"><p class="num"><span class="iconfont">' + '&#xe728;'
                                    + '</span></p><p class="content">获取神秘奖品一份</p><p class="state">' + text
                                    + '</p></div><div class="split"></div> <div class="line-style"></div></div>'
                                )

                            } else {
                                var text = '领取';
                                parent.append(
                                    '<div class="banner-box"><div class="banner active"><p class="num"><span class="iconfont">' + '&#xe728;'
                                    + '</span></p><p class="content">获取神秘奖品一份</p><p class="state">' + text
                                    + '</p></div><div class="split"></div> <div class="line-style"></div></div>'
                                )
                            }
                        }
                    }
                    console.log(orderIdList);
                    if (orderIdList.length) {
                        $('.ticket-panel').css({
                            display: 'block',
                        })
                    }
                    $('.banner-box').each(function (i) {
                        $(this).on('click', function () {
                            if ($(this).find('.state').text() == '已领取') {
                                console.log('已领取');
                            } else {
                                console.log($('.page-success'));
                                $('.page-success').css({display: "block"});
                                $('.no-take').on('click', function () {
                                    $('.page-success').css({display: "none"});
                                })
                                $('.take').on('click', function () {
                                    var url = '/api/o2o/order/confirmReceipt';
                                    $.ajax({
                                        type: 'post',
                                        url: lf.utils.getProtocol(prefix + url + '?orderId=' + orderIdList[i]),
                                        dataType: 'json',
                                        success: function () {
                                            console.log('已领取');
                                            location.reload();
                                        }
                                    })
                                })
                            }
                        })
                    })
                },
            });
        });

        $('.btn').on('touchstart', function () {
            if (lf.utils.getSys() == "IOS") {
                lf.bridgeJs.doClose();
            }
            lf.bridgeJs.callAppHandler('scanQRCode', null, function (data) {
                var url = data.result;
                lf.bridgeJs.doLocation(url, '猜灯谜');
            })
        })

    }
</script>

</body>
</html>
